ರಿಯಾಕ್ಟ್ ಪೋರ್ಟಲ್‌ಗಳು: ವರ್ಧಿತ UX ಗಾಗಿ ಮಾಡಲ್‌ಗಳು ಮತ್ತು ಟೂಲ್‌ಟಿಪ್‌ಗಳನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳುವುದು

ಆಧುನಿಕ ವೆಬ್ ಅಭಿವೃದ್ಧಿಯಲ್ಲಿ, ಅರ್ಥಗರ್ಭಿತ ಮತ್ತು ಆಕರ್ಷಕವಾದ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್‍ಗಳನ್ನು ರಚಿಸುವುದು ಅತ್ಯಂತ ಮುಖ್ಯವಾಗಿದೆ. ರಿಯಾಕ್ಟ್, ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್‍ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಬಳಸುವ ಒಂದು ಜನಪ್ರಿಯ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಲೈಬ್ರರಿಯಾಗಿದ್ದು, ಇದನ್ನು ಸಾಧಿಸಲು ವಿವಿಧ ಉಪಕರಣಗಳು ಮತ್ತು ತಂತ್ರಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ. ಅಂತಹ ಒಂದು ಶಕ್ತಿಶಾಲಿ ಸಾಧನವೇ ರಿಯಾಕ್ಟ್ ಪೋರ್ಟಲ್‌ಗಳು. ಈ ಬ್ಲಾಗ್ ಪೋಸ್ಟ್ ರಿಯಾಕ್ಟ್ ಪೋರ್ಟಲ್‌ಗಳ ಜಗತ್ತನ್ನು ಪರಿಶೋಧಿಸುತ್ತದೆ, ವಿಶೇಷವಾಗಿ ಸುಲಭವಾಗಿ ಪ್ರವೇಶಿಸಬಹುದಾದ ಮತ್ತು ದೃಷ್ಟಿಗೆ ಆಕರ್ಷಕವಾದ ಮಾಡಲ್‌ಗಳು ಮತ್ತು ಟೂಲ್‌ಟಿಪ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವಲ್ಲಿ ಅವುಗಳ ಅನ್ವಯದ ಮೇಲೆ ಗಮನಹರಿಸುತ್ತದೆ.

ರಿಯಾಕ್ಟ್ ಪೋರ್ಟಲ್‌ಗಳು ಎಂದರೇನು?

ರಿಯಾಕ್ಟ್ ಪೋರ್ಟಲ್‌ಗಳು, ಪೇರೆಂಟ್ ಕಾಂಪೊನೆಂಟ್‌ನ DOM ಶ್ರೇಣಿಯ ಹೊರಗೆ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ DOM ನೋಡ್‌ಗೆ ಕಾಂಪೊನೆಂಟ್‌ನ ಚಿಲ್ಡ್ರನ್‌ಗಳನ್ನು ರೆಂಡರ್ ಮಾಡಲು ಒಂದು ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತವೆ. ಸರಳವಾಗಿ ಹೇಳುವುದಾದರೆ, ಇದು ಪ್ರಮಾಣಿತ ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್ ಟ್ರೀಯಿಂದ ಹೊರಬಂದು HTML ರಚನೆಯ ಬೇರೆ ಭಾಗಕ್ಕೆ ನೇರವಾಗಿ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಸೇರಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಸ್ಟಾಕಿಂಗ್ ಸಂದರ್ಭವನ್ನು ನಿಯಂತ್ರಿಸಲು ಅಥವಾ ಅವುಗಳ ಪೇರೆಂಟ್ ಕಂಟೇನರ್‌ನ ಗಡಿಗಳ ಹೊರಗೆ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಇರಿಸಬೇಕಾದ ಸಂದರ್ಭಗಳಲ್ಲಿ ಇದು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ.

ಸಾಂಪ್ರದಾಯಿಕವಾಗಿ, ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳು DOM ನಲ್ಲಿ ಅವುಗಳ ಪೇರೆಂಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳ ಚಿಲ್ಡ್ರನ್‌ಗಳಾಗಿ ರೆಂಡರ್ ಆಗುತ್ತವೆ. ಇದು ಕೆಲವೊಮ್ಮೆ ಸ್ಟೈಲಿಂಗ್ ಮತ್ತು ಲೇಔಟ್ ಸವಾಲುಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು, ವಿಶೇಷವಾಗಿ ಮಾಡಲ್‌ಗಳು ಅಥವಾ ಟೂಲ್‌ಟಿಪ್‌ಗಳಂತಹ ಎಲಿಮೆಂಟ್‌ಗಳೊಂದಿಗೆ ವ್ಯವಹರಿಸುವಾಗ, ಅವು ಇತರ ವಿಷಯಗಳ ಮೇಲೆ ಕಾಣಿಸಿಕೊಳ್ಳಬೇಕು ಅಥವಾ ವ್ಯೂಪೋರ್ಟ್‌ಗೆ ಸಂಬಂಧಿಸಿದಂತೆ ಇರಿಸಬೇಕಾಗುತ್ತದೆ. ರಿಯಾಕ್ಟ್ ಪೋರ್ಟಲ್‌ಗಳು ಈ ಮಿತಿಗಳನ್ನು ಮೀರಿ, ಈ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ನೇರವಾಗಿ DOM ಟ್ರೀಯ ಬೇರೆ ಭಾಗಕ್ಕೆ ರೆಂಡರ್ ಮಾಡಲು ಅನುಮತಿಸುವ ಮೂಲಕ ಒಂದು ಪರಿಹಾರವನ್ನು ಒದಗಿಸುತ್ತವೆ.

ರಿಯಾಕ್ಟ್ ಪೋರ್ಟಲ್‌ಗಳನ್ನು ಏಕೆ ಬಳಸಬೇಕು?

ಹಲವಾರು ಪ್ರಮುಖ ಪ್ರಯೋಜನಗಳು ರಿಯಾಕ್ಟ್ ಪೋರ್ಟಲ್‌ಗಳನ್ನು ನಿಮ್ಮ ರಿಯಾಕ್ಟ್ ಅಭಿವೃದ್ಧಿ ಶಸ್ತ್ರಾಗಾರದಲ್ಲಿ ಒಂದು ಮೌಲ್ಯಯುತ ಸಾಧನವನ್ನಾಗಿ ಮಾಡುತ್ತವೆ:

• ಸುಧಾರಿತ ಸ್ಟೈಲಿಂಗ್ ಮತ್ತು ಲೇಔಟ್: ಪೋರ್ಟಲ್‌ಗಳು ನಿಮಗೆ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಅವುಗಳ ಪೇರೆಂಟ್ ಕಂಟೇನರ್‌ನ ಹೊರಗೆ ಇರಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತವೆ, overflow: hidden, z-index ಮಿತಿಗಳು, ಅಥವಾ ಸಂಕೀರ್ಣ ಲೇಔಟ್ ನಿರ್ಬಂಧಗಳಿಂದ ಉಂಟಾಗುವ ಸ್ಟೈಲಿಂಗ್ ಸಮಸ್ಯೆಗಳನ್ನು ನಿವಾರಿಸುತ್ತವೆ. ಒಂದು ಮಾಡಲ್ ತನ್ನ ಪೇರೆಂಟ್ ಕಂಟೇನರ್‌ನಲ್ಲಿ overflow: hidden ಸೆಟ್ ಆಗಿದ್ದರೂ ಸಹ ಸಂಪೂರ್ಣ ಪರದೆಯನ್ನು ಆವರಿಸಬೇಕಾಗಿದೆ ಎಂದು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ಪೋರ್ಟಲ್‌ಗಳು ಈ ಮಿತಿಯನ್ನು ಮೀರಿ ಮಾಡಲ್ ಅನ್ನು ನೇರವಾಗಿ body ಗೆ ರೆಂಡರ್ ಮಾಡಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತವೆ.
• ವರ್ಧಿತ ಪ್ರವೇಶಸಾಧ್ಯತೆ: ಪೋರ್ಟಲ್‌ಗಳು ಪ್ರವೇಶಸಾಧ್ಯತೆಗೆ ನಿರ್ಣಾಯಕವಾಗಿವೆ, ವಿಶೇಷವಾಗಿ ಮಾಡಲ್‌ಗಳೊಂದಿಗೆ ವ್ಯವಹರಿಸುವಾಗ. ಮಾಡಲ್ ವಿಷಯವನ್ನು ನೇರವಾಗಿ body ಗೆ ರೆಂಡರ್ ಮಾಡುವುದರಿಂದ ಫೋಕಸ್ ಟ್ರ್ಯಾಪಿಂಗ್ ಅನ್ನು ಸುಲಭವಾಗಿ ನಿರ್ವಹಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳು ಅಥವಾ ಕೀಬೋರ್ಡ್ ನ್ಯಾವಿಗೇಷನ್ ಬಳಸುವ ಬಳಕೆದಾರರು ಮಾಡಲ್ ತೆರೆದಿರುವಾಗ ಅದರೊಳಗೆ ಉಳಿಯುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಇದು ಸುಗಮ ಮತ್ತು ಪ್ರವೇಶಿಸಬಹುದಾದ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಒದಗಿಸಲು ಅತ್ಯಗತ್ಯ.
• ಸ್ವಚ್ಛವಾದ ಕಾಂಪೊನೆಂಟ್ ರಚನೆ: ಮಾಡಲ್ ಅಥವಾ ಟೂಲ್‌ಟಿಪ್ ವಿಷಯವನ್ನು ಮುಖ್ಯ ಕಾಂಪೊನೆಂಟ್ ಟ್ರೀಯ ಹೊರಗೆ ರೆಂಡರ್ ಮಾಡುವ ಮೂಲಕ, ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್ ರಚನೆಯನ್ನು ನೀವು ಸ್ವಚ್ಛವಾಗಿ ಮತ್ತು ಹೆಚ್ಚು ನಿರ್ವಹಣಾತ್ಮಕವಾಗಿ ಇರಿಸಬಹುದು. ಈ ಕಾಳಜಿಗಳ ಪ್ರತ್ಯೇಕತೆಯು ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಓದಲು, ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಮತ್ತು ನಿರ್ವಹಿಸಲು ಸುಲಭಗೊಳಿಸುತ್ತದೆ.
• ಸ್ಟಾಕಿಂಗ್ ಸಂದರ್ಭದ ಸಮಸ್ಯೆಗಳನ್ನು ತಪ್ಪಿಸುವುದು: CSS ನಲ್ಲಿ ಸ್ಟಾಕಿಂಗ್ ಸಂದರ್ಭಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು ಕುಖ್ಯಾತವಾಗಿ ಕಷ್ಟಕರವಾಗಿರುತ್ತದೆ. ಪೋರ್ಟಲ್‌ಗಳು ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ನೇರವಾಗಿ DOM ನ ಮೂಲಕ್ಕೆ ರೆಂಡರ್ ಮಾಡಲು ನಿಮಗೆ ಅನುಮತಿಸುವ ಮೂಲಕ ಈ ಸಮಸ್ಯೆಗಳನ್ನು ತಪ್ಪಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತವೆ, ಅವು ಪುಟದಲ್ಲಿನ ಇತರ ಎಲಿಮೆಂಟ್‌ಗಳಿಗೆ ಸಂಬಂಧಿಸಿದಂತೆ ಯಾವಾಗಲೂ ಸರಿಯಾಗಿ ಇರುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತವೆ.

ರಿಯಾಕ್ಟ್ ಪೋರ್ಟಲ್‌ಗಳೊಂದಿಗೆ ಮಾಡಲ್‌ಗಳನ್ನು ಅಳವಡಿಸುವುದು

ಮಾಡಲ್‌ಗಳು ಪ್ರಮುಖ ಮಾಹಿತಿಯನ್ನು ಪ್ರದರ್ಶಿಸಲು ಅಥವಾ ಬಳಕೆದಾರರಿಂದ ಇನ್‌ಪುಟ್ ಕೇಳಲು ಬಳಸುವ ಸಾಮಾನ್ಯ UI ಮಾದರಿಯಾಗಿದೆ. ರಿಯಾಕ್ಟ್ ಪೋರ್ಟಲ್‌ಗಳನ್ನು ಬಳಸಿ ಮಾಡಲ್ ಅನ್ನು ಹೇಗೆ ರಚಿಸುವುದು ಎಂದು ಈಗ ಅನ್ವೇಷಿಸೋಣ.

1. ಪೋರ್ಟಲ್ ರೂಟ್ ರಚಿಸುವುದು

ಮೊದಲಿಗೆ, ನೀವು ಮಾಡಲ್ ಅನ್ನು ರೆಂಡರ್ ಮಾಡಬೇಕಾದ DOM ನೋಡ್ ಅನ್ನು ರಚಿಸಬೇಕು. ಇದನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ನಿಮ್ಮ HTML ಫೈಲ್‌ಗೆ (ಸಾಮಾನ್ಯವಾಗಿ body ನಲ್ಲಿ) ನಿರ್ದಿಷ್ಟ ID ಯೊಂದಿಗೆ div ಎಲಿಮೆಂಟ್ ಅನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ಮಾಡಲಾಗುತ್ತದೆ:

            <div id="modal-root"></div>
            

              
                Copy
              
            
          

2. ಮಾಡಲ್ ಕಾಂಪೊನೆಂಟ್ ರಚಿಸುವುದು

ಮುಂದೆ, ಮಾಡಲ್ ಅನ್ನು ಪ್ರತಿನಿಧಿಸುವ ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ರಚಿಸಿ. ಈ ಕಾಂಪೊನೆಂಟ್ ಮಾಡಲ್‌ನ ವಿಷಯ ಮತ್ತು ತರ್ಕವನ್ನು ಹೊಂದಿರುತ್ತದೆ.

            import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

const Modal = ({ isOpen, onClose, children }) => {
  const [mounted, setMounted] = useState(false);
  const modalRoot = useRef(document.getElementById('modal-root'));

  useEffect(() => {
    setMounted(true);
    return () => setMounted(false);
  }, []);

  if (!isOpen) return null;

  const modalContent = (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        {children}
        <button onClick={onClose}>Close</button>
      </div>
    </div>
  );

  return mounted && modalRoot.current
    ? ReactDOM.createPortal(modalContent, modalRoot.current)
    : null;
};

export default Modal;

            

              
                Copy
              
            
          

ವಿವರಣೆ:

• isOpen prop: ಮಾಡಲ್ ಗೋಚರಿಸುತ್ತದೆಯೇ ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ.
• onClose prop: ಮಾಡಲ್ ಅನ್ನು ಮುಚ್ಚಲು ಬಳಸುವ ಒಂದು ಫಂಕ್ಷನ್.
• children prop: ಮಾಡಲ್ ಒಳಗೆ ಪ್ರದರ್ಶಿಸಬೇಕಾದ ವಿಷಯ.
• modalRoot ref: ಮಾಡಲ್ ರೆಂಡರ್ ಆಗುವ DOM ನೋಡ್ ಅನ್ನು (#modal-root) ಉಲ್ಲೇಖಿಸುತ್ತದೆ.
• useEffect hook: ಪೋರ್ಟಲ್ ರೂಟ್ ತಕ್ಷಣ ಲಭ್ಯವಿಲ್ಲದಿದ್ದಾಗ ಉಂಟಾಗುವ ಸಮಸ್ಯೆಗಳನ್ನು ತಪ್ಪಿಸಲು, ಕಾಂಪೊನೆಂಟ್ ಮೌಂಟ್ ಆದ ನಂತರವೇ ಮಾಡಲ್ ರೆಂಡರ್ ಆಗುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.
• ReactDOM.createPortal: ರಿಯಾಕ್ಟ್ ಪೋರ್ಟಲ್‌ಗಳನ್ನು ಬಳಸಲು ಇದು ಪ್ರಮುಖವಾಗಿದೆ. ಇದು ಎರಡು ಆರ್ಗ್ಯುಮೆಂಟ್‌ಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ: ರೆಂಡರ್ ಮಾಡಬೇಕಾದ ರಿಯಾಕ್ಟ್ ಎಲಿಮೆಂಟ್ (modalContent) ಮತ್ತು ಅದನ್ನು ರೆಂಡರ್ ಮಾಡಬೇಕಾದ DOM ನೋಡ್ (modalRoot.current).
• ಓವರ್‌ಲೇ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡುವುದು: ಮಾಡಲ್ ಅನ್ನು ಮುಚ್ಚುತ್ತದೆ. ಮಾಡಲ್ ಒಳಗೆ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಅದು ಮುಚ್ಚುವುದನ್ನು ತಡೆಯಲು ನಾವು modal-content div ಮೇಲೆ e.stopPropagation() ಅನ್ನು ಬಳಸುತ್ತೇವೆ.

3. ಮಾಡಲ್ ಕಾಂಪೊನೆಂಟ್ ಬಳಸುವುದು

ಈಗ, ನೀವು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ Modal ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಬಳಸಬಹುದು:

            import React, { useState } from 'react';
import Modal from './Modal';

const App = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const openModal = () => setIsModalOpen(true);
  const closeModal = () => setIsModalOpen(false);

  return (
    <div>
      <button onClick={openModal}>Open Modal</button>

      <Modal isOpen={isModalOpen} onClose={closeModal}>
        <h2>Modal Content</h2>
        <p>This is the content of the modal.</p>
      </Modal>
    </div>
  );
};

export default App;

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯು isOpen prop ಮತ್ತು openModal ಹಾಗೂ closeModal ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಮಾಡಲ್‌ನ ಗೋಚರತೆಯನ್ನು ಹೇಗೆ ನಿಯಂತ್ರಿಸುವುದು ಎಂಬುದನ್ನು ತೋರಿಸುತ್ತದೆ. <Modal> ಟ್ಯಾಗ್‌ಗಳೊಳಗಿನ ವಿಷಯವು ಮಾಡಲ್ ಒಳಗೆ ರೆಂಡರ್ ಆಗುತ್ತದೆ.

4. ಮಾಡಲ್‌ಗೆ ಸ್ಟೈಲಿಂಗ್ ಮಾಡುವುದು

ಮಾಡಲ್ ಅನ್ನು ಇರಿಸಲು ಮತ್ತು ಸ್ಟೈಲ್ ಮಾಡಲು CSS ಶೈಲಿಗಳನ್ನು ಸೇರಿಸಿ. ಇಲ್ಲಿ ಒಂದು ಮೂಲಭೂತ ಉದಾಹರಣೆ ಇದೆ:

            .modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Ensure it's on top of other content */
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

            

              
                Copy
              
            
          

CSS ವಿವರಣೆ:

• position: fixed: ಸ್ಕ್ರೋಲಿಂಗ್ ಅನ್ನು ಲೆಕ್ಕಿಸದೆ ಮಾಡಲ್ ಸಂಪೂರ್ಣ ವ್ಯೂಪೋರ್ಟ್ ಅನ್ನು ಆವರಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.
• background-color: rgba(0, 0, 0, 0.5): ಮಾಡಲ್‌ನ ಹಿಂದೆ ಅರೆ-ಪಾರದರ್ಶಕ ಓವರ್‌ಲೇಯನ್ನು ರಚಿಸುತ್ತದೆ.
• display: flex, justify-content: center, align-items: center: ಮಾಡಲ್ ಅನ್ನು ಅಡ್ಡಲಾಗಿ ಮತ್ತು ಲಂಬವಾಗಿ ಕೇಂದ್ರದಲ್ಲಿರಿಸುತ್ತದೆ.
• z-index: 1000: ಪುಟದಲ್ಲಿನ ಎಲ್ಲಾ ಇತರ ಎಲಿಮೆಂಟ್‌ಗಳ ಮೇಲೆ ಮಾಡಲ್ ರೆಂಡರ್ ಆಗುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.

5. ಮಾಡಲ್‌ಗಳಿಗಾಗಿ ಪ್ರವೇಶಸಾಧ್ಯತೆಯ ಪರಿಗಣನೆಗಳು

ಮಾಡಲ್‌ಗಳನ್ನು ಅಳವಡಿಸುವಾಗ ಪ್ರವೇಶಸಾಧ್ಯತೆಯು ನಿರ್ಣಾಯಕವಾಗಿದೆ. ಇಲ್ಲಿ ಕೆಲವು ಪ್ರಮುಖ ಪರಿಗಣನೆಗಳು:

• ಫೋಕಸ್ ನಿರ್ವಹಣೆ: ಮಾಡಲ್ ತೆರೆದಾಗ, ಫೋಕಸ್ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಮಾಡಲ್‌ನೊಳಗಿನ ಒಂದು ಎಲಿಮೆಂಟ್‌ಗೆ (ಉದಾ., ಮೊದಲ ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್ ಅಥವಾ ಕ್ಲೋಸ್ ಬಟನ್) ಚಲಿಸಬೇಕು. ಮಾಡಲ್ ಮುಚ್ಚಿದಾಗ, ಫೋಕಸ್ ಮಾಡಲ್ ಅನ್ನು ತೆರೆಯಲು ಕಾರಣವಾದ ಎಲಿಮೆಂಟ್‌ಗೆ ಹಿಂತಿರುಗಬೇಕು. ಇದನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ರಿಯಾಕ್ಟ್‌ನ useRef hook ಬಳಸಿ ಈ ಹಿಂದೆ ಫೋಕಸ್ ಆಗಿದ್ದ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಸಂಗ್ರಹಿಸುವ ಮೂಲಕ ಸಾಧಿಸಲಾಗುತ್ತದೆ.
• ಕೀಬೋರ್ಡ್ ನ್ಯಾವಿಗೇಷನ್: ಬಳಕೆದಾರರು ಕೀಬೋರ್ಡ್ (ಟ್ಯಾಬ್ ಕೀ) ಬಳಸಿ ಮಾಡಲ್ ಅನ್ನು ನ್ಯಾವಿಗೇಟ್ ಮಾಡಬಹುದೆಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಫೋಕಸ್ ಮಾಡಲ್‌ನೊಳಗೆ ಸಿಕ್ಕಿಹಾಕಿಕೊಳ್ಳಬೇಕು, ಬಳಕೆದಾರರು ಆಕಸ್ಮಿಕವಾಗಿ ಅದರಿಂದ ಹೊರಗೆ ಟ್ಯಾಬ್ ಮಾಡುವುದನ್ನು ತಡೆಯುತ್ತದೆ. react-focus-lock ನಂತಹ ಲೈಬ್ರರಿಗಳು ಇದಕ್ಕೆ ಸಹಾಯ ಮಾಡಬಹುದು.
• ARIA ಅಟ್ರಿಬ್ಯೂಟ್‌ಗಳು: ಮಾಡಲ್ ಬಗ್ಗೆ ಶಬ್ದಾರ್ಥದ ಮಾಹಿತಿಯನ್ನು ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳಿಗೆ ಒದಗಿಸಲು ARIA ಅಟ್ರಿಬ್ಯೂಟ್‌ಗಳನ್ನು ಬಳಸಿ. ಉದಾಹರಣೆಗೆ, ಮಾಡಲ್ ಕಂಟೇನರ್ ಮೇಲೆ aria-modal="true" ಬಳಸಿ ಮತ್ತು ಮಾಡಲ್‌ಗೆ ವಿವರಣಾತ್ಮಕ ಲೇಬಲ್ ಒದಗಿಸಲು aria-label ಅಥವಾ aria-labelledby ಬಳಸಿ.
• ಮುಚ್ಚುವ ವ್ಯವಸ್ಥೆ: ಮಾಡಲ್ ಅನ್ನು ಮುಚ್ಚಲು ಹಲವು ಮಾರ್ಗಗಳನ್ನು ಒದಗಿಸಿ, ಉದಾಹರಣೆಗೆ ಕ್ಲೋಸ್ ಬಟನ್, ಓವರ್‌ಲೇ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡುವುದು, ಅಥವಾ ಎಸ್ಕೇಪ್ ಕೀ ಒತ್ತುವುದು.

ಫೋಕಸ್ ನಿರ್ವಹಣೆಯ ಉದಾಹರಣೆ (useRef ಬಳಸಿ):

            import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

const Modal = ({ isOpen, onClose, children }) => {
  const [mounted, setMounted] = useState(false);
  const modalRoot = useRef(document.getElementById('modal-root'));
  const firstFocusableElement = useRef(null);
  const previouslyFocusedElement = useRef(null);

  useEffect(() => {
    setMounted(true);
    if (isOpen) {
      previouslyFocusedElement.current = document.activeElement;
      if (firstFocusableElement.current) {
        firstFocusableElement.current.focus();
      }

      const handleKeyDown = (event) => {
        if (event.key === 'Escape') {
          onClose();
        }
      };

      document.addEventListener('keydown', handleKeyDown);

      return () => {
        document.removeEventListener('keydown', handleKeyDown);
        if (previouslyFocusedElement.current) {
          previouslyFocusedElement.current.focus();
        }
      };
    }

    return () => setMounted(false);
  }, [isOpen, onClose]);


  if (!isOpen) return null;

  const modalContent = (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        <h2>Modal Content</h2>
        <p>This is the content of the modal.</p>
        <input type="text" ref={firstFocusableElement} /> <!-- First focusable element -->
        <button onClick={onClose}>Close</button>
      </div>
    </div>
  );

  return mounted && modalRoot.current
    ? ReactDOM.createPortal(modalContent, modalRoot.current)
    : null;
};

export default Modal;

            

              
                Copy
              
            
          

ಫೋಕಸ್ ನಿರ್ವಹಣೆಯ ಕೋಡ್‌ನ ವಿವರಣೆ:

• previouslyFocusedElement.current: ಮಾಡಲ್ ತೆರೆಯುವ ಮೊದಲು ಫೋಕಸ್ ಹೊಂದಿದ್ದ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಸಂಗ್ರಹಿಸುತ್ತದೆ.
• firstFocusableElement.current: ಮಾಡಲ್‌ನ *ಒಳಗಿರುವ* ಮೊದಲ ಫೋಕಸ್ ಮಾಡಬಹುದಾದ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಸೂಚಿಸುತ್ತದೆ (ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಟೆಕ್ಸ್ಟ್ ಇನ್‌ಪುಟ್).
• ಮಾಡಲ್ ತೆರೆದಾಗ (isOpen true ಆಗಿದ್ದಾಗ):
  • ಪ್ರಸ್ತುತ ಫೋಕಸ್ ಆಗಿರುವ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಸಂಗ್ರಹಿಸಲಾಗುತ್ತದೆ.
  • ಫೋಕಸ್ ಅನ್ನು firstFocusableElement.current ಗೆ ಸರಿಸಲಾಗುತ್ತದೆ.
  • ಮಾಡಲ್ ಅನ್ನು ಮುಚ್ಚಲು ಎಸ್ಕೇಪ್ ಕೀಗಾಗಿ ಈವೆಂಟ್ ಲಿಸನರ್ ಅನ್ನು ಸೇರಿಸಲಾಗುತ್ತದೆ.
• ಮಾಡಲ್ ಮುಚ್ಚಿದಾಗ (ಕ್ಲೀನಪ್ ಫಂಕ್ಷನ್):
  • ಎಸ್ಕೇಪ್ ಕೀ ಈವೆಂಟ್ ಲಿಸನರ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ.
  • ಫೋಕಸ್ ಅನ್ನು ಈ ಹಿಂದೆ ಫೋಕಸ್ ಆಗಿದ್ದ ಎಲಿಮೆಂಟ್‌ಗೆ ಹಿಂತಿರುಗಿಸಲಾಗುತ್ತದೆ.

ರಿಯಾಕ್ಟ್ ಪೋರ್ಟಲ್‌ಗಳೊಂದಿಗೆ ಟೂಲ್‌ಟಿಪ್‌ಗಳನ್ನು ಅಳವಡಿಸುವುದು

ಟೂಲ್‌ಟಿಪ್‌ಗಳು ಸಣ್ಣ, ಮಾಹಿತಿಪೂರ್ಣ ಪಾಪ್‌ಅಪ್‌ಗಳಾಗಿದ್ದು, ಬಳಕೆದಾರರು ಒಂದು ಎಲಿಮೆಂಟ್‌ನ ಮೇಲೆ ಹೋವರ್ ಮಾಡಿದಾಗ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತವೆ. ರಿಯಾಕ್ಟ್ ಪೋರ್ಟಲ್‌ಗಳನ್ನು ಬಳಸಿ ಪೇರೆಂಟ್ ಎಲಿಮೆಂಟ್‌ನ ಸ್ಟೈಲಿಂಗ್ ಅಥವಾ ಲೇಔಟ್ ಅನ್ನು ಲೆಕ್ಕಿಸದೆ ಸರಿಯಾಗಿ ಇರಿಸಲಾದ ಟೂಲ್‌ಟಿಪ್‌ಗಳನ್ನು ರಚಿಸಬಹುದು.

1. ಪೋರ್ಟಲ್ ರೂಟ್ ರಚಿಸುವುದು (ಈಗಾಗಲೇ ರಚಿಸದಿದ್ದರೆ)

ನೀವು ಈಗಾಗಲೇ ಮಾಡಲ್‌ಗಳಿಗಾಗಿ ಪೋರ್ಟಲ್ ರೂಟ್ ಅನ್ನು ರಚಿಸದಿದ್ದರೆ, ನಿಮ್ಮ HTML ಫೈಲ್‌ಗೆ (ಸಾಮಾನ್ಯವಾಗಿ body ನಲ್ಲಿ) ನಿರ್ದಿಷ್ಟ ID ಯೊಂದಿಗೆ div ಎಲಿಮೆಂಟ್ ಅನ್ನು ಸೇರಿಸಿ:

            <div id="tooltip-root"></div>
            

              
                Copy
              
            
          

2. ಟೂಲ್‌ಟಿಪ್ ಕಾಂಪೊನೆಂಟ್ ರಚಿಸುವುದು

            import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

const Tooltip = ({ text, children, position = 'top' }) => {
  const [isVisible, setIsVisible] = useState(false);
  const [positionStyle, setPositionStyle] = useState({});
  const [mounted, setMounted] = useState(false);

  const tooltipRoot = useRef(document.getElementById('tooltip-root'));
  const tooltipRef = useRef(null);
  const triggerRef = useRef(null);

  useEffect(() => {
    setMounted(true);
    return () => setMounted(false);
  }, []);

  const handleMouseEnter = () => {
    setIsVisible(true);
    updatePosition();
  };

  const handleMouseLeave = () => {
    setIsVisible(false);
  };

  const updatePosition = () => {
    if (!triggerRef.current || !tooltipRef.current) return;

    const triggerRect = triggerRef.current.getBoundingClientRect();
    const tooltipRect = tooltipRef.current.getBoundingClientRect();

    let top = 0;
    let left = 0;

    switch (position) {
      case 'top':
        top = triggerRect.top - tooltipRect.height - 5; // 5px spacing
        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
        break;
      case 'bottom':
        top = triggerRect.bottom + 5;
        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
        break;
      case 'left':
        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
        left = triggerRect.left - tooltipRect.width - 5;
        break;
      case 'right':
        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
        left = triggerRect.right + 5;
        break;
      default:
        break;
    }

    setPositionStyle({
      top: `${top}px`,
      left: `${left}px`,
    });
  };

  const tooltipContent = isVisible && (
    <div className="tooltip" style={positionStyle} ref={tooltipRef}>
      {text}
    </div>
  );

  return (
    <span
      ref={triggerRef}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      {children}
      {mounted && tooltipRoot.current ? ReactDOM.createPortal(tooltipContent, tooltipRoot.current) : null}
    </span>
  );
};

export default Tooltip;

            

              
                Copy
              
            
          

ವಿವರಣೆ:

• text prop: ಟೂಲ್‌ಟಿಪ್‌ನಲ್ಲಿ ಪ್ರದರ್ಶಿಸಬೇಕಾದ ಪಠ್ಯ.
• children prop: ಟೂಲ್‌ಟಿಪ್ ಅನ್ನು ಪ್ರಚೋದಿಸುವ ಎಲಿಮೆಂಟ್ (ಬಳಕೆದಾರರು ಹೋವರ್ ಮಾಡುವ ಎಲಿಮೆಂಟ್).
• position prop: ಪ್ರಚೋದಕ ಎಲಿಮೆಂಟ್‌ಗೆ ಸಂಬಂಧಿಸಿದಂತೆ ಟೂಲ್‌ಟಿಪ್‌ನ ಸ್ಥಾನ ('top', 'bottom', 'left', 'right'). ಡೀಫಾಲ್ಟ್ 'top'.
• isVisible state: ಟೂಲ್‌ಟಿಪ್‌ನ ಗೋಚರತೆಯನ್ನು ನಿಯಂತ್ರಿಸುತ್ತದೆ.
• tooltipRoot ref: ಟೂಲ್‌ಟಿಪ್ ರೆಂಡರ್ ಆಗುವ DOM ನೋಡ್ ಅನ್ನು (#tooltip-root) ಉಲ್ಲೇಖಿಸುತ್ತದೆ.
• tooltipRef ref: ಟೂಲ್‌ಟಿಪ್ ಎಲಿಮೆಂಟ್ ಅನ್ನೇ ಉಲ್ಲೇಖಿಸುತ್ತದೆ, ಅದರ ಆಯಾಮಗಳನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡಲು ಬಳಸಲಾಗುತ್ತದೆ.
• triggerRef ref: ಟೂಲ್‌ಟಿಪ್ ಅನ್ನು ಪ್ರಚೋದಿಸುವ ಎಲಿಮೆಂಟ್ ಅನ್ನು (children) ಉಲ್ಲೇಖಿಸುತ್ತದೆ.
• handleMouseEnter ಮತ್ತು handleMouseLeave: ಪ್ರಚೋದಕ ಎಲಿಮೆಂಟ್ ಮೇಲೆ ಹೋವರ್ ಮಾಡಲು ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳು.
• updatePosition: position prop ಮತ್ತು ಪ್ರಚೋದಕ ಹಾಗೂ ಟೂಲ್‌ಟಿಪ್ ಎಲಿಮೆಂಟ್‌ಗಳ ಆಯಾಮಗಳ ಆಧಾರದ ಮೇಲೆ ಟೂಲ್‌ಟಿಪ್‌ನ ಸರಿಯಾದ ಸ್ಥಾನವನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡುತ್ತದೆ. ಇದು ವ್ಯೂಪೋರ್ಟ್‌ಗೆ ಸಂಬಂಧಿಸಿದಂತೆ ಎಲಿಮೆಂಟ್‌ಗಳ ಸ್ಥಾನ ಮತ್ತು ಆಯಾಮಗಳನ್ನು ಪಡೆಯಲು getBoundingClientRect() ಅನ್ನು ಬಳಸುತ್ತದೆ.
• ReactDOM.createPortal: ಟೂಲ್‌ಟಿಪ್ ವಿಷಯವನ್ನು tooltipRoot ಗೆ ರೆಂಡರ್ ಮಾಡುತ್ತದೆ.

3. ಟೂಲ್‌ಟಿಪ್ ಕಾಂಪೊನೆಂಟ್ ಬಳಸುವುದು

            import React from 'react';
import Tooltip from './Tooltip';

const App = () => {
  return (
    <div>
      <p>
        Hover over this <Tooltip text="This is a tooltip!
With multiple lines."
position="bottom">text</Tooltip> to see a tooltip.
      </p>

      <button>
        Hover <Tooltip text="Button tooltip" position="top">here</Tooltip> for tooltip.
      </button>
    </div>
  );
};

export default App;

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯು ಪಠ್ಯ ಮತ್ತು ಬಟನ್‌ಗಳಿಗೆ ಟೂಲ್‌ಟಿಪ್‌ಗಳನ್ನು ಸೇರಿಸಲು Tooltip ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಹೇಗೆ ಬಳಸುವುದು ಎಂಬುದನ್ನು ತೋರಿಸುತ್ತದೆ. ನೀವು text ಮತ್ತು position prop ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಟೂಲ್‌ಟಿಪ್‌ನ ಪಠ್ಯ ಮತ್ತು ಸ್ಥಾನವನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಬಹುದು.

4. ಟೂಲ್‌ಟಿಪ್‌ಗೆ ಸ್ಟೈಲಿಂಗ್ ಮಾಡುವುದು

ಟೂಲ್‌ಟಿಪ್ ಅನ್ನು ಇರಿಸಲು ಮತ್ತು ಸ್ಟೈಲ್ ಮಾಡಲು CSS ಶೈಲಿಗಳನ್ನು ಸೇರಿಸಿ. ಇಲ್ಲಿ ಒಂದು ಮೂಲಭೂತ ಉದಾಹರಣೆ ಇದೆ:

            .tooltip {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8); /* Dark background */
  color: white;
  padding: 5px;
  border-radius: 3px;
  font-size: 12px;
  z-index: 1000; /* Ensure it's on top of other content */
  white-space: pre-line; /* Respect line breaks in the text prop */
}

            

              
                Copy
              
            
          

CSS ವಿವರಣೆ:

• position: absolute: ಟೂಲ್‌ಟಿಪ್ ಅನ್ನು tooltip-root ಗೆ ಸಂಬಂಧಿಸಿದಂತೆ ಇರಿಸುತ್ತದೆ. ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್‌ನಲ್ಲಿನ updatePosition ಫಂಕ್ಷನ್, ಪ್ರಚೋದಕ ಎಲಿಮೆಂಟ್‌ನ ಹತ್ತಿರ ಟೂಲ್‌ಟಿಪ್ ಅನ್ನು ಇರಿಸಲು ನಿಖರವಾದ top ಮತ್ತು left ಮೌಲ್ಯಗಳನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡುತ್ತದೆ.
• background-color: rgba(0, 0, 0, 0.8): ಟೂಲ್‌ಟಿಪ್‌ಗೆ ಸ್ವಲ್ಪ ಪಾರದರ್ಶಕ ಕಪ್ಪು ಹಿನ್ನೆಲೆಯನ್ನು ರಚಿಸುತ್ತದೆ.
• white-space: pre-line: ನೀವು text prop ನಲ್ಲಿ ಸೇರಿಸಬಹುದಾದ ಲೈನ್ ಬ್ರೇಕ್‌ಗಳನ್ನು ಸಂರಕ್ಷಿಸಲು ಇದು ಮುಖ್ಯವಾಗಿದೆ. ಇದು ಇಲ್ಲದಿದ್ದರೆ, ಟೂಲ್‌ಟಿಪ್ ಪಠ್ಯವು ಒಂದೇ ಸಾಲಿನಲ್ಲಿ ಕಾಣಿಸುತ್ತದೆ.

ಜಾಗತಿಕ ಪರಿಗಣನೆಗಳು ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸುವಾಗ, ಈ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಪರಿಗಣಿಸಿ:

• ಅಂತಾರಾಷ್ಟ್ರೀಕರಣ (i18n): ಅನುವಾದಗಳು ಮತ್ತು ಸ್ಥಳೀಕರಣವನ್ನು ನಿರ್ವಹಿಸಲು react-i18next ಅಥವಾ FormatJS ನಂತಹ ಲೈಬ್ರರಿಯನ್ನು ಬಳಸಿ. ಇದು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ವಿವಿಧ ಭಾಷೆಗಳು ಮತ್ತು ಪ್ರದೇಶಗಳಿಗೆ ಸುಲಭವಾಗಿ ಅಳವಡಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಮಾಡಲ್‌ಗಳು ಮತ್ತು ಟೂಲ್‌ಟಿಪ್‌ಗಳಿಗಾಗಿ, ಪಠ್ಯ ವಿಷಯವನ್ನು ಸರಿಯಾಗಿ ಅನುವಾದಿಸಲಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
• ಬಲದಿಂದ ಎಡಕ್ಕೆ (RTL) ಬೆಂಬಲ: ಬಲದಿಂದ ಎಡಕ್ಕೆ ಓದುವ ಭಾಷೆಗಳಿಗೆ (ಉದಾ., ಅರೇಬಿಕ್, ಹೀಬ್ರೂ), ನಿಮ್ಮ ಮಾಡಲ್‌ಗಳು ಮತ್ತು ಟೂಲ್‌ಟಿಪ್‌ಗಳು ಸರಿಯಾಗಿ ಪ್ರದರ್ಶಿಸಲ್ಪಡುತ್ತವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. RTL ಲೇಔಟ್‌ಗಳಿಗೆ ಸರಿಹೊಂದುವಂತೆ ನೀವು ಎಲಿಮೆಂಟ್‌ಗಳ ಸ್ಥಾನ ಮತ್ತು ಸ್ಟೈಲಿಂಗ್ ಅನ್ನು ಸರಿಹೊಂದಿಸಬೇಕಾಗಬಹುದು. CSS ತಾರ್ಕಿಕ ಗುಣಲಕ್ಷಣಗಳು (ಉದಾ., margin-left ಬದಲಿಗೆ margin-inline-start) ಸಹಾಯಕವಾಗಬಹುದು.
• ಸಾಂಸ್ಕೃತಿಕ ಸೂಕ್ಷ್ಮತೆ: ನಿಮ್ಮ ಮಾಡಲ್‌ಗಳು ಮತ್ತು ಟೂಲ್‌ಟಿಪ್‌ಗಳನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸುವಾಗ ಸಾಂಸ್ಕೃತಿಕ ವ್ಯತ್ಯಾಸಗಳ ಬಗ್ಗೆ ಗಮನವಿರಲಿ. ಕೆಲವು ಸಂಸ್ಕೃತಿಗಳಲ್ಲಿ ಆಕ್ರಮಣಕಾರಿ ಅಥವಾ ಅನುಚಿತವೆಂದು ಪರಿಗಣಿಸಬಹುದಾದ ಚಿತ್ರಗಳು ಅಥವಾ ಚಿಹ್ನೆಗಳನ್ನು ಬಳಸುವುದನ್ನು ತಪ್ಪಿಸಿ.
• ಸಮಯ ವಲಯಗಳು ಮತ್ತು ದಿನಾಂಕ ಸ್ವರೂಪಗಳು: ನಿಮ್ಮ ಮಾಡಲ್‌ಗಳು ಅಥವಾ ಟೂಲ್‌ಟಿಪ್‌ಗಳು ದಿನಾಂಕಗಳು ಅಥವಾ ಸಮಯಗಳನ್ನು ಪ್ರದರ್ಶಿಸಿದರೆ, ಅವುಗಳನ್ನು ಬಳಕೆದಾರರ ಸ್ಥಳೀಯ ಮತ್ತು ಸಮಯ ವಲಯಕ್ಕೆ ಅನುಗುಣವಾಗಿ ಫಾರ್ಮ್ಯಾಟ್ ಮಾಡಲಾಗಿದೆಯೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. moment.js (ಹಳೆಯದಾದರೂ, ಇನ್ನೂ ವ್ಯಾಪಕವಾಗಿ ಬಳಸಲಾಗುತ್ತದೆ) ಅಥವಾ date-fns ನಂತಹ ಲೈಬ್ರರಿಗಳು ಇದಕ್ಕೆ ಸಹಾಯ ಮಾಡಬಹುದು.
• ವಿವಿಧ ಸಾಮರ್ಥ್ಯಗಳಿಗಾಗಿ ಪ್ರವೇಶಸಾಧ್ಯತೆ: ನಿಮ್ಮ ಮಾಡಲ್‌ಗಳು ಮತ್ತು ಟೂಲ್‌ಟಿಪ್‌ಗಳು ವಿಕಲಾಂಗ ವ್ಯಕ್ತಿಗಳಿಂದ ಬಳಸಲು ಯೋಗ್ಯವಾಗಿವೆಯೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಪ್ರವೇಶಸಾಧ್ಯತೆಯ ಮಾರ್ಗಸೂಚಿಗಳಿಗೆ (WCAG) ಬದ್ಧರಾಗಿರಿ. ಇದು ಚಿತ್ರಗಳಿಗೆ ಪರ್ಯಾಯ ಪಠ್ಯವನ್ನು ಒದಗಿಸುವುದು, ಸಾಕಷ್ಟು ಬಣ್ಣದ ಕಾಂಟ್ರಾಸ್ಟ್ ಅನ್ನು ಖಚಿತಪಡಿಸುವುದು, ಮತ್ತು ಕೀಬೋರ್ಡ್ ನ್ಯಾವಿಗೇಷನ್ ಬೆಂಬಲವನ್ನು ಒದಗಿಸುವುದನ್ನು ಒಳಗೊಂಡಿದೆ.

ತೀರ್ಮಾನ

ರಿಯಾಕ್ಟ್ ಪೋರ್ಟಲ್‌ಗಳು ಹೊಂದಿಕೊಳ್ಳುವ ಮತ್ತು ಪ್ರವೇಶಿಸಬಹುದಾದ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಒಂದು ಶಕ್ತಿಶಾಲಿ ಸಾಧನವಾಗಿದೆ. ಅವುಗಳನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಹೇಗೆ ಬಳಸುವುದು ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಹೆಚ್ಚಿಸುವ ಮತ್ತು ನಿಮ್ಮ ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳ ರಚನೆ ಮತ್ತು ನಿರ್ವಹಣೆಯನ್ನು ಸುಧಾರಿಸುವ ಮಾಡಲ್‌ಗಳು ಮತ್ತು ಟೂಲ್‌ಟಿಪ್‌ಗಳನ್ನು ರಚಿಸಬಹುದು. ವೈವಿಧ್ಯಮಯ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ಅಭಿವೃದ್ಧಿಪಡಿಸುವಾಗ ಪ್ರವೇಶಸಾಧ್ಯತೆ ಮತ್ತು ಜಾಗತಿಕ ಪರಿಗಣನೆಗಳಿಗೆ ಆದ್ಯತೆ ನೀಡಲು ಮರೆಯದಿರಿ, ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಎಲ್ಲರಿಗೂ ಒಳಗೊಳ್ಳುವ ಮತ್ತು ಬಳಸಲು ಯೋಗ್ಯವಾಗಿವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.

ಹೆಚ್ಚಿನ ಕಲಿಕೆ

• ರಿಯಾಕ್ಟ್ ಪೋರ್ಟಲ್ಸ್ ದಸ್ತಾವೇಜನ್ನು
• ವೆಬ್ ಕಂಟೆಂಟ್ ಅಕ್ಸೆಸಿಬಿಲಿಟಿ ಗೈಡ್‌ಲೈನ್ಸ್ (WCAG)
• react-i18next